<template>
  <div class='SalesPerformance'>
    <el-row style="margin:10px 0">
      <el-col :span="1.5">
        <el-button type="primary"
                   icon="el-icon-download"
                   size="small"
                   v-loading="exportLoading_achievement"
                   @click="handleExportAchievement"
                   v-hasPermi="api.export_achievement">导出销售业绩</el-button>
        <el-button type="primary"
                   icon="el-icon-download"
                   size="small"
                   v-loading="exportLoading_achievementOrder"
                   @click="handleExportAchievementOrder"
                   v-hasPermi="api.export_achievement_order">导出月份订单明细</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData"
                border
                max-height="500"
                :row-class-name="tableRowClassName"
                show-summary
                :summary-method="getSummaries">
        <el-table-column prop="tag_source"
                         label="渠道"
                         width="">
        </el-table-column>
        <el-table-column prop="tag_campaign"
                         label="运营"
                         width="">
        </el-table-column>
        <el-table-column prop="count"
                         label="单量"
                         width="">
        </el-table-column>
        <el-table-column prop="total_price"
                         label="销售额"
                         sortable>
        </el-table-column>
        <el-table-column prop="currency"
                         label="币种">
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>


import { listRoleGroupwoob } from '@/api/system/orders'
export default {
  name: 'SalesPerformance',
  components: {},
  props: {
    exportLoading_achievement: false,
    exportLoading_achievementOrder: false,
    queryParams: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      tableData: [],
      sumData: {},
      api: {
        export_achievement: `/admin/customerjourneywoob/export_achievement`,
        export_achievement_order: `/admin/customerjourneywoob/export_achievement_order`
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleExportAchievement () {
      this.$emit('handleExportAchievement')
    },
    handleExportAchievementOrder () {
      this.$emit('handleExportAchievementOrder')
    },
    tableRowClassName ({ row, rowIndex }) {
      if (row.tag_campaign == '统计') {
        return 'tongji-row'
      }
      return '';
    },
    getData () {
      listRoleGroupwoob(this.formatQueryParams(this.queryParams)).then(res => {
        if (res.data && res.data.length) {
          this.tableData = res.data
          this.sumData = res.lists_news_total
        }
      })
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const key = column.property
        switch (key) {
          case 'count':
            sums[index] = this.sumData.count
            break
          case 'total_price':
            sums[index] = this.sumData.total_price
            break
          default:
            sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>
<style scoped lang='scss'>
::v-deep .tongji-row {
    background-color: #fdf5e6;
}
</style>